<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes draw {
            to {
                stroke-dashoffset: 0;
            }
        }

        path {
            /* 虚线和实线的长度 */
            stroke-dasharray: var(--l);
            /* 虚线的偏移量，向起始位置移动 */
            stroke-dashoffset: var(--l);
            animation: draw 2s linear forwards;
        }
    </style>
</head>

<body>
    <svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
        <path class="p" d="M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0" stroke="black" stroke-width="5"
            fill="none">
    </svg>

    <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="256" height="256"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <path stroke="red" stroke-width="10"
            d="M340.55434795 452.96871963h350.1411038c5.52834756 0 9.96098555 12.99908672 9.96098555 29.03627373s-4.48244385 29.03627373-9.96098555 29.03627461H340.55434795c-5.52834756 0-9.96098555-12.99908672-9.96098642-29.03627461s4.43263886-29.03627373 9.96098642-29.03627373zM340.55434795 598.12518623h350.1411038c5.52834756 0 9.96098555 12.99908672 9.96098555 29.03627374s-4.48244385 29.03627373-9.96098555 29.03627372H340.55434795c-5.52834756 0-9.96098555-12.99908672-9.96098642-29.03627372s4.43263886-29.03627373 9.96098642-29.03627374zM340.55434795 743.2941043h350.1411038c5.52834756 0 9.96098555 12.99908672 9.96098555 29.03627373s-4.48244385 29.03627373-9.96098555 29.03627373H340.55434795c-5.52834756 0-9.96098555-12.99908672-9.96098642-29.03627373s4.43263886-29.03627373 9.96098642-29.03627373z"
            fill="none"></path>
        <path stroke="red" stroke-width="10"
            d="M816.83888662 962H207.1642959A29.02382227 29.02382227 0 0 1 178.12802217 932.96372627V91.03629834A29.03627373 29.03627373 0 0 1 207.1642959 62.00002461h464.50567265a29.0487252 29.0487252 0 0 1 21.16709561 9.11430263L837.95617637 224.99910723a29.09853018 29.09853018 0 0 1 7.90653251 19.92197197v688.04264707a29.01137167 29.01137167 0 0 1-29.02382226 29.03627373zM236.20056963 903.93990401h551.5895918v-647.46408164L659.14402959 120.07257208H236.20056963z"
            fill="none" p-id="1623"></path>
        <path stroke="red" stroke-width="10"
            d="M816.83888662 307.81225391H671.66996856a29.02382227 29.02382227 0 0 1-29.03627374-29.03627461V104.58323984h58.10990186v145.20627071H816.87624013z"
            fill="none" p-id="1624"></path>
    </svg>
    <script>
        const path = document.querySelectorAll('path');
        path.forEach(p => {
            // 获取路径长度
            const len = p.getTotalLength()
            p.style.setProperty('--l', len)
        })

    </script>
</body>

</html>